<!-- <template>  
  <div class="video-player-container">  
    <video  
      ref="videoElement"  
      class="video-player"  
      :src="videoSrc"  
      :autoplay="autoplay"  
      :muted="muted"  
      :loop="loop"  
      :controls="controls"  
      @play="handlePlay"  
      @pause="handlePause"  
      @ended="handleEnded"  
    >  
      Your browser does not support the video tag.  
    </video>  
    
  </div>  
</template>
<script setup>  
import { ref, defineProps } from 'vue';  
  
const props = defineProps({  
  src: String,  
  autoplay: Boolean,  
  muted: Boolean,  
  loop: Boolean,  
  controls: {  
    type: Boolean,  
    default: true  
  }  
});  
  
const videoElement = ref(null);  
  
const handlePlay = () => {  
  console.log('Video is playing');  
};  
  
const handlePause = () => {  
  console.log('Video is paused');  
};  
  
const handleEnded = () => {  
  console.log('Video has ended');  
};  
</script>
<style scoped>  
.video-player-container {  
  width: 100%;  
  max-width: 640px;  
  margin: auto;  
}  
  
.video-player {  
  width: 100%;  
  display: block;  
}  
</style> -->




<template>  
  <div class="video-player">  
    <video  
      ref="videoElement"  
      class="video-content"  
      src="../../../../sp1.mp4"  
      @play="onPlay"  
      @pause="onPause"  
      controls  
    ></video>  
    <button @click="togglePlay">切换播放/暂停</button>  
  </div>  
</template>  
  
<script setup>  
import { ref, onMounted } from 'vue';  
  
// 响应式数据：视频源  
const videoSrc = ref('YOUR_VIDEO_SOURCE_HERE.mp4'); // 替换为你的视频源URL  
  
// 引用video元素  
const videoElement = ref(null);  
  
// 方法：切换播放/暂停  
function togglePlay() {  
  if (videoElement.value.paused) {  
    videoElement.value.play();  
  } else {  
    videoElement.value.pause();  
  }  
}  
  
// 监听播放事件  
function onPlay() {  
  console.log('视频开始播放');  
}  
  
// 监听暂停事件  
function onPause() {  
  console.log('视频暂停');  
}  
  
// 组件挂载后，如果需要，可以在这里进行视频初始化等操作  
onMounted(() => {  
  // 示例：自动播放（注意：自动播放可能受到浏览器策略的限制）  
  // videoElement.value.play().catch(error => {  
  //   console.error('自动播放失败：', error);  
  // });  
});  
</script>  
  
<style scoped>  
.video-player {  
  position: relative;  
  width: 100%;  
  max-width: 640px; /* 或者你想要的宽度 */  
  margin: auto;  
}  
  
.video-content {  
  width: 100%;  
  height: auto;  
}  
</style>